<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        单位
            px 像素，固定的值
            em 
                如果当前元素没有font-size,则以父元素的font-size进行取值的，如果当前元素有font-size，则以当前元素的font-size进行取值的
            rem 
                以html(根元素)的font-size进行取值的
            
            vw 把屏幕宽度分成100份，1vw就相当于窗口宽度的百分之一
            vh 把屏幕高度度分成100份，1vh就相当于窗口高度的百分之一
     -->
     <style>
         html{
             font-size: 20px;
         }
         .all{
             font-size: 20px;
         }
         .all>div{
            width:10em;
            /* width多少像素？ */
            height:10em;
            background: red;
         }
         .all>p{
             width:10rem;
             /* width等于多少像素? 160px */
             /* width:300px，请问等于多少rem? 300/20（根元素）=rem */
             height:10rem;
             background: blue;
         }
         .all>span{
             display: block;
             width:100vw;
             height:1vw;
             background: yellow;
         }
     </style>
</head>
<body>
    <div class="all">
        <div>弹弹弹</div>
        <p>你好美丽</p>
        <span>1</span>
    </div>
</body>
</html>